<template>
  <div class="cinema-detail">
    <nav-bar :back="backChange">{{ this.cinemaInfo.nm }}</nav-bar>
    <div class="cinema-block">
      <div class="cinema-info">
        <div class="cinema-title ellipsis">{{ this.cinemaInfo.nm }}</div>
        <div class="cinema-addr ellipsis">{{ this.cinemaInfo.addr }}</div>

        <div class="location-icon">
          <img src="../assets/img/location.png" />
        </div>
      </div>
    </div>

    <swiper class="swiper" :options="swiperOption" ref="Myswiper" @slideChangeTransitionEnd="onSlideChangeEnd">
      <!-- <div class="bg-filter"></div> -->
      <template v-slot:container-start><span>Container start</span></template>

      <swiper-slide v-for="(item, index) in MovieList" :key="index" :id="index" >
        <img :src="$options.filters.src(item.img)"/>
        <div class="lazyload-wrapper">
          <div></div>
        </div>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>

    <movie-show :movieshow="MovieShow"></movie-show>

    <!-- 超值套餐 -->
    <deal-list :dealList="dealList"></deal-list>
  </div>
</template>

<script> 
import NavBar from "@/components/NavBar.vue";
import MovieShow from "@/components/MovieShow.vue";

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

import DealList from "@/components/DealList.vue";         
import { mapMutations } from 'vuex';

export default {
  props: {
    cid: { String, Number },
  },
  data() {
    return {
      cinemaInfo: [],
      backChange: true,
      MovieList: [],
      MovieShow: [],
      dealList: [],
      mlId:0,
      swiperOption: {
        centeredSlides: true,
        slidesPerView: 4,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  beforeRouteEnter(to,from,next){
    next()
  },
  beforeRouteLeave(to,from,next){
        // this.showList=null
        this.MovieShow=this.MovieList[0]
        this.movieShowData(this.MovieShow)
        next()
  },
  created() {
    this.getCinemaInfo();
    this.getMovieList();
    this.getDealList();
  },
  mounted() {
  
  },
  
  methods: {
    async getCinemaInfo() {
      let res = await this.axios.get("cinema/detail?cinemaId=" + this.cid);
      // console.log(res);
      this.cinemaInfo = res;
    },
    async getMovieList() {
      let res = await this.axios.get(
        "cinema/shows?cinemaId=44&ci=20&channelId=4"
      );
      this.MovieList = res.movies;
      this.MovieShow=this.MovieList[0]
      // console.log(this.MovieList);
    },
    async getDealList() {
      let res = await this.axios.get("cinema/queryDealList.json");
      // console.log(res);
      this.dealList = res.dealList;
      // console.log(this.dealList);
    },
    onSlideChangeEnd(){ 
        // console.log(this.$refs.Myswiper.$el.swiper.activeIndex); 
        this.mlId=this.$refs.Myswiper.$el.swiper.activeIndex
        this.MovieShow=this.MovieList[this.mlId]
        this.movieShowData(this.MovieShow)
    },
    ...mapMutations(["movieShowData"])
  },
  components: {
    NavBar,
    MovieShow,
    Swiper,
    SwiperSlide,
    DealList,
  },
  filters: {
    src(value) {
      return value.replace("w.h", "170.230");
    },
  },
  watch:{
    
  }
};
</script>

<style lang="less" scoped>
/deep/.swiper-slide {
  width: 65px;
  height: 95px;
  // margin-left: 15px;
  box-sizing: initial;
  z-index: 2;
  & > img {
    width: 100%;
    height: 100%;
  }
}
/deep/.swiper-wrapper {
  height: 95px !important;
}
/deep/.swiper-container {
  padding: 20px 15px 20px 5px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  // width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  // background-color: #40454d;
  background-color: rgb(248, 248, 248);

  // opacity: .9;
}
/deep/.swiper-slide-active {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  border: 2px solid #fff;
}
.bg-filter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #40454d;
  opacity: 0.55;
}
.lazyload-wrapper {
  &::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    background: url("../assets/img/lazyload-wrapper.png");
    background-size: contain;
  }
}
.cinema-block {
  background-color: #fff;
  margin-top: 50px;
  .cinema-info {
    position: relative;
    padding: 15px 100px 15px 15px;
    .ellipsis {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .cinema-title {
      font-size: 17px;
      line-height: 24px;
      font-weight: 700;
      color: #333;
    }
    .cinema-addr {
      margin-top: 2px;
      font-size: 13px;
      line-height: 18.5px;
      color: #999;
    }
    .location-icon {
      position: absolute;
      right: 0;
      top: 50%;
      width: 70px;
      height: 31px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      text-align: center;
      & > img {
        display: inline-block;
        width: 19px;
        height: 22px;
        margin-top: 5px;
      }
      &::after {
        position: absolute;
        top: 0;
        left: 0px;
        height: 100%;
        width: 1px;
        content: "";
        background: #d8d8d8;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }
    }
  }
}
</style>